import React from 'react';
import {Router, Route, Link} from 'react-router';
class Content extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="col-xs-12">
        <div className="car-info">
          <div className="media">
            <div className="media-left">
              <a href="javascript:;">
                <img className="media-object car-thumb" src={this.props.data.thumb_url ? CBH.imgUploadPath +'/data/upload/'+ this.props.data.thumb_url : ''} alt=""/>
              </a>
            </div>
            <div className="media-body">
              <p>{this.props.data.title}</p>
              <p>起拍价 :
                <span>{this.props.data.start_price}</span>
              </p>
              <p>{this.props.data.mileage?this.props.data.mileage+'万公里':''} {this.props.data.pub_date?this.props.data.pub_date+'上牌':''} {this.props.data.emission_standards}</p>
              <div className="row">
                <div className="col-xs-6" style={{
                  paddingRight: 0
                }}>
                  <a className="now-auction-link" href={this.props.data.graphic}>查看图文介绍</a>
                </div>
                <div className="col-xs-5">
                  <img className="goodcar img-responsive" src={'/img/goodcar.png'}/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
class AuctionBlock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      adata: {}
    };
    this.remindMe = this.remindMe.bind(this);
  }
  componentWillMount() {
    $.ajax({
      'type': 'POST',
      'async': false,
      'url': CBH.apiRoot + '/?g=Api&m=ActivityProduct&a=allwait',
      'dataType': 'jsonp',
      success: function(res) {
        this.setState(res);
      }.bind(this)
    });
  }
  componentDidMount() {
    var mySwiper2 = new Swiper('.hs2', {
      direction: 'horizontal',
      loop: true,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
    });
  }
  componentDidUpdate() {
    var mySwiper2 = new Swiper('.hs2', {
      direction: 'horizontal',
      loop: true,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
    });
  }
  remindMe() {
    $.ajax({
      'type': 'GET',
      'data': {
        aid: this.state.adata.id,
        uid: CBH.UserInfo.id
      },
      'url': CBH.apiRoot + '/?g=Api&m=Activity&a=remind_me',
      'dataType': 'jsonp',
      success: function(res) {
        if (res.status) {
          alert('操作成功!');
        } else {
          alert(res.msg);
        }
      }.bind(this)
    });
  }
  render() {
    let caritems = this.state.data.map((car, i) => <div className="swiper-slide" key={i}>
      <Content data={car} key={i}/>
    </div>)
    if (this.state.result) {
      return (
        <div>
          <p className="section-block-title">车壁虎直播间</p>
          <section className="section-block now-auction">
            <div className="row">
              <p className="title"><a href="http://auction.chebihu.com">{this.state.adata.title}
                ({this.state.adata.start_time}开拍)</a></p>
              <div className="swiper-container hs2">
                <div className="swiper-wrapper">
                  {caritems}
                </div>
                <div className="swiper-button-prev"></div>
                <div className="swiper-button-next"></div>
              </div>
              <div className="bottom-menu">
                <a href="javascript:;" onClick={this.remindMe}>开拍提醒我</a>
                <Link to="/waitlist">查看全部拍品</Link>
              </div>
            </div>
          </section>
        </div>
      );
    } else {
      return (
        <div>
          <p className="section-block-title">车壁虎直播间</p>
          <section className="section-block now-auction">
            <div className="row">
              <p className="title">暂无拍卖活动！</p>
            </div>
          </section>
        </div>
      );
    }
  }
}
export default AuctionBlock;
